// 滚动条
.proto-viewport {

    .scroll-bar {
        position: absolute;
        top: 17px;
        left: 17px;
        right: 0px;
        bottom: 0px;
        z-index: 15;
        pointer-events: none;

        .scroll-x {
            position: absolute;
            left: 0px;
            right: 11px;
            bottom: 0px;
            height: 12px;

            .handler-x {
                width: 22.1669%;
                left: 39.7738%;
                bottom: 2px;
                height: 10px;
                .thumb {
                    bottom: 0px;
                    width: 100%;
                    height: 6px;
                    background: rgb(210, 210, 216);

                    pointer-events: none;
                    border-radius: 4px;
                    transition: background 0.2s ease-in-out 0s;
                }
            }

        }

        .scroll-y {
            position: absolute;
            top: 0px;
            bottom: 11px;
            right: 0px;
            width: 12px;

            .handler-y {
                height: 32.6945%;
                top: 37.2969%;
                .thumb {
                    pointer-events: none;
                    border-radius: 4px;
                    transition: background 0.2s ease-in-out 0s;
                    right: 0px;
                    height: 100%;
                    width: 6px;
                    background: rgb(222, 222, 228);
                }

            }
        }

    }
}